import echarts from "echarts"
import 'echarts-gl';
import _ from 'lodash'
import echartsTheme from '../../static/json/echarts-theme.json';
import theme from "../../static/json/echarts-theme";
function Directive(Vue, options) {
  var theme = echartsTheme;
  const defaultThemeName = 'macarons';
  Vue.directive('chart', {
    // 当被绑定的元素插入到 DOM 中时……
    bind: function (el, binding) {
      let value = binding.value //传入的参数{option,theme,themeParam}，其中：option格式与echarts官网所需格式相同 {title:'',legends:[],data:[]}，theme：主题名称，wonderland | vintage | dark | westeros | essos | walden | chalk | infographic | macarons | selfTheme,selfTheme表示自定义主题;若theme传的是selfTheme，则themeParam需要传入themeName和themeOption，来自定义主题名称和主题颜色等
      if (value == null || value == undefined || JSON.stringify(value) == '{}') {
        return;
      }
      const PARAM = value.option;
      const THEME = value.theme?value.theme:defaultThemeName;
      const THEMEPARAM = value.themeParam;
      let option = {};
      let baseOption = {};
      /*
      {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#063374",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#00fcf9",
            }
          },
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#00fcf9",
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#00c7ff",
              width: 1,
              type: "solid"
            },
          },
          splitLine: {
            lineStyle: {
              color: "#01283f",
            }
          }
        }]
      };
      */
      let isArray = Array.isArray(PARAM);
      if (isArray) { //如果是一个数组，则传了多个option，要将多个option合并
        let tmp = {};
        PARAM.forEach((d) => {
          tmp = _.mergeWith(d, baseOption);
        })
        option = tmp;
      } else {
        option = _.mergeWith(baseOption, PARAM);
      }
      let chartTheme = null;
      if(THEME == 'selfTheme'){ //如果是自定义主题
        chartTheme = THEMEPARAM.themeName;
         echarts.registerTheme(THEMEPARAM.themeName,THEMEPARAM.themeOption);
      }else{
        chartTheme = THEME;
      }
      let chart = echarts.init(el,chartTheme);
      chart.showLoading();
      chart.setOption(option);
      chart.hideLoading();
      window.addEventListener('resize', function () {
        if (chart && !chart._disposed) {
          chart.resize();
        }
      })
    },
    update: function (el, binding, vnode, oldNode) {
      let old = oldNode.data.directives[0].value;
      let newNode = vnode.data.directives[0].value;
      if (_.isEqual(newNode, old)) { //判断传入的数据与之前的数据是否相同，相同则不需要进行更新
        return;
      }
      let chart = echarts.getInstanceByDom(el);
      let value = binding.value; //传入的参数 {title:'',legends:[],data:[]}
      if (value == null || value == undefined || JSON.stringify(value) == '{}') {
        if (chart && !chart._disposed) {
          chart.dispose();
        }
        return;
      }
      // 定义事件示例：回调函数参数为echarts对象
      // subs: {
      //   'click': function(params) {}
      // }
      // subs放在options中
      const subs = value.option.subs? value.option.subs : null //收集定义的事件
      const PARAM = value.option;
      const THEME = value.theme?value.theme:defaultThemeName;
      const THEMEPARAM = value.themeParam;
      let option = {};
      let baseOption = {};
      /*{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#063374",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#00fcf9",
            }
          },
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#00fcf9",
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#00c7ff",
              width: 1,
              type: "solid"
            },
          },
          splitLine: {
            lineStyle: {
              color: "#01283f",
            }
          }
        }]
      };
      */
      let isArray = Array.isArray(PARAM);
      if (isArray) { //如果是一个数组，则传了多个option，要将多个option合并
        let tmp = {};
        PARAM.forEach((d) => {
          tmp = _.mergeWith(d, baseOption);
        })
        option = tmp;
      } else {
        option = _.mergeWith(baseOption, PARAM);
      }
      let chartTheme = null,clearOption = false;
      if(THEME == 'selfTheme'){ //如果是自定义主题
        chartTheme = THEMEPARAM.themeName;
        echarts.registerTheme(THEMEPARAM.themeName,THEMEPARAM.themeOption);
      }else{
        chartTheme = THEME;
      }
      if (!chart) {
        chart = echarts.init(el,chartTheme);
      } else {
        if (chart._disposed) {
          chart = echarts.init(el,chartTheme);
        }
      }
      if(subs) { //触发定义的事件
        Object.keys(subs).forEach(key => {
          chart.on(key, subs[key], binding)
        })
      } 
      chart.setOption(option, clearOption);
      if (chart && !chart._disposed) {
        chart.resize();
      }
    },
    unbind: function () {
      window.removeEventListener('resize', function () {})
    }
  })
}
export default Directive;
